<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8"/>
    <title>isPointInPath</title>
</head>
<body style="background-color: gray">

    <div style="text-align: center">
        <button class="clean">clean</button>
        <button class="random">random</button>
        <button class="down">down the image</button>
    </div>

    <div class="main" style="text-align: center">
        <canvas id="mainCanvas" width="400" height="400"></canvas>
    </div>
    <div style="text-align: center">
        当前所选颜色：<canvas id="selectedColor" width="200" height="20"></canvas>
    </div >
    <div style="text-align: center">
            <canvas id="palette" width="200" height="200"></canvas>
    </div>



    <script type="text/javascript" src="./download.js"></script>
<script>
    var select_color = "#000000";
    const showColor = document.getElementById("selectedColor");
    const Sctx = showColor.getContext( "2d" );

    function chooseColor(canvas, obj){
        this.canvas = canvas;
        this.cvs = canvas.getContext("2d");
        this.color00 = "#000000";
        this.color01 = "#1D2B53";
        this.color02 = "#7E2553";
        this.color03 = "#008351";
        this.color10 = "#A85135";
        this.color11 = "#5F574F";
        this.color12 = "#C2C3C7";
        this.color13 = "#FFF1E8";
        this.color20 = "#FF004D";
        this.color21 = "#FFAC00";
        this.color22 = "#FFFF27";
        this.color23 = "#00E756";
        this.color30 = "#29ADFF";
        this.color31 = "#83769C";
        this.color32 = "#FF77A8";
        this.color33 = "#FFCCAA";
        this.colorlist = [this.color00, this.color01, this.color02, this.color03,
                        this.color10, this.color11, this.color12, this.color13,
                        this.color20, this.color21, this.color22, this.color23,
                        this.color30, this.color31, this.color32, this.color33];
        this.boxSize = 50;
        this.bgWidthLength = 0;
        this.bgHeightLength = 0;
        this.clickedArr = [];
        this.start();
        this.click()
        return this;
    }
    chooseColor.prototype.start = function (){
        this.bgWidthLength = parseInt( this.canvas.width / this.boxSize )
        this.bgHeightLength = parseInt( this.canvas.height / this.boxSize )
        this.drawBg()
    }

    chooseColor.prototype.drawBg = function(){
        var conut = 0;
        for(let i=0;i<this.bgHeightLength;i++){
            for(let j=0;j<this.bgWidthLength;j++ ){
                this.drawBgBox(j*this.boxSize,i*this.boxSize,conut)
                conut++;
            }
        }
    }

    chooseColor.prototype.drawBgBox = function(x,y,z) {
        this.cvs.beginPath()
        this.cvs.fillStyle = this.colorlist[z];
        this.cvs.fillRect(x+1, y+1, this.boxSize-1,this.boxSize-1);
        this.cvs.fill()
        this.cvs.stroke()
        this.cvs.closePath()
    }

    chooseColor.prototype.mousemove = function(e){
        let o = this.computedXY(e.offsetX,e.offsetY);
    }

    chooseColor.prototype.computedXY = function(x,y){
        for( let i=0;i<this.bgWidthLength;i++ ){
            if( x > i*this.boxSize && x < (i+1)*this.boxSize ){
                x = i
                break;
            }
        }
        for( let i=0;i<this.bgHeightLength;i++ ){
            if( y > i*this.boxSize && y < (i+1)*this.boxSize ){
                y = i
                break;
            }
        }
        return {x,y}
    }

    chooseColor.prototype.click = function(){
        let move = this.mousemove.bind(this)
        this.canvas.addEventListener("mousedown",function(e){
            let o = this.computedXY(e.offsetX,e.offsetY)
            select_color = this.colorlist[o.y*4+o.x];
            Sctx.fillStyle=select_color;
            Sctx.fillRect(0,0,300,300);
            this.canvas.addEventListener("mousemove",move );
        }.bind(this))
        this.canvas.addEventListener("mouseup",function(e){
            this.canvas.removeEventListener("mousemove",move )
        }.bind(this))
    }

    function run(canvas, obj) {
        obj = obj || {}
        this.canvas = canvas
        this.cvs = canvas.getContext("2d")
        this.bgColor = obj.bgColor || "#e8e8e8"
        this.clickedColor = obj.clickedColor || "#000000"
        this.boxSize = obj.boxSize || 50
        this.bgWidthLength = 0
        this.bgHeightLength = 0
        this.clickedArr = []
        this.start()
        this.click()
        return this
    }

    run.prototype.start = function(){
        this.bgWidthLength = parseInt( this.canvas.width / this.boxSize )
        this.bgHeightLength = parseInt( this.canvas.height / this.boxSize )
        this.drawBg()
    }

    run.prototype.click = function(){
        let move = this.mousemove.bind(this)
        this.canvas.addEventListener("mousedown",function(e){
            let o = this.computedXY(e.offsetX,e.offsetY)
            this.toggleClick(o)
            this.canvas.addEventListener("mousemove",move )
        }.bind(this))
        this.canvas.addEventListener("mouseup",function(e){
            this.canvas.removeEventListener("mousemove",move )
        }.bind(this))
    }

    run.prototype.mousemove = function(e){
        let o = this.computedXY(e.offsetX,e.offsetY)
        this.toggleClick(o,true)
    }

    run.prototype.computedXY = function(x,y){
        for( let i=0;i<this.bgWidthLength;i++ ){
            if( x > i*this.boxSize && x < (i+1)*this.boxSize ){
                x = i
                break;
            }
        }
        for( let i=0;i<this.bgHeightLength;i++ ){
            if( y > i*this.boxSize && y < (i+1)*this.boxSize ){
                y = i
                break;
            }
        }
        return {x,y}
    }

    run.prototype.toggleClick = function(o,draw){
        let has = {}
            has.is = true
        this.clickedArr.forEach(function(item,index){

            if( item.x === o.x && item.y === o.y ){
                has.is = false
                has.index = index
            }
        })
        if(has.is){
            this.clickedArr.push(o)
            this.drawBgBox(o.x*this.boxSize,o.y*this.boxSize,true)
        }
        if(!has.is && !draw){
            this.clickedArr.splice(has.index,1)
            this.drawBgBox( o.x*this.boxSize,o.y*this.boxSize )
        }
    }

    run.prototype.Random = function(length){
        for(let i=0;i<length;i++ ){
            let o = {}
                o.x = parseInt( Math.random() * this.bgWidthLength )
                o.y = parseInt( Math.random() * this.bgHeightLength )
            this.toggleClick(o)
        }
    }

    run.prototype.clean = function(){
        this.clickedArr.forEach(function(o,index){
            this.drawBgBox( o.x*this.boxSize , o.y*this.boxSize )
        }.bind(this))
        this.clickedArr = []
    }

    run.prototype.drawBg = function(){
        for(let i=0;i<this.bgHeightLength;i++){
            for(let j=0;j<this.bgWidthLength;j++ ){
                this.drawBgBox(j*this.boxSize,i*this.boxSize)
            }
        }
    }

    run.prototype.drawBgBox = function(x,y,z) {
        this.cvs.beginPath()
        this.cvs.fillStyle = z ? select_color : this.bgColor;
        this.cvs.fillRect(x+1, y+1, this.boxSize-1,this.boxSize-1 );
        this.cvs.fill()
        this.cvs.stroke()
        this.cvs.closePath()
    }

    let canvas = document.getElementById("mainCanvas")
    let cvs = canvas.getContext("2d")
    let Pcanvas = document.getElementById("palette")
    let Pcvs = canvas.getContext("2d")
    let a = new run(canvas)
    let b = new chooseColor(Pcanvas)
    let clean = document.querySelector(".clean");
    let random = document.querySelector(".random");
    let down = document.querySelector(".down");
        clean.onclick = function(){
            a.clean()
        };
        random.onclick = function(){
            a.Random(100)
        };
        down.onclick = function(){
            download(canvas.toDataURL(),'test.png','image/png')
        }
</script>
</body>
</html>
